<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>转换</title>
</head>
<body>
<div class="a">转换-旋转</div>
<div class="b">转换-移动</div>
<div class="c">旋转-xy轴比例缩放</div>
<div class="d">旋转-xy轴倾斜</div>
<div class="e">旋转</div>
<style>
    .e{
        background-color: #b490ca;
        transform: matrix(0.866,0.5,-0.5,0.866,0,0);
    }
    .d{
        background-color: #888888;
        transform: skew(30deg,20deg);
    }
    .c{
        background-color: green;
        transform: scale(2,3);
    }
    div{
        padding: 100px;
        text-align: center;

    }
    .b{
        transform: translate(50px,100px);
        background-color: red;

    }

    .a{
        transform: rotate(45deg);
        background-color: yellow;

    }
</style>
</body>
</html>